<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        select, input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .error {
            color: red;
            font-size: 0.8em;
            margin-top: 5px;
        }
        /* 隐藏中药医师类型选项的默认样式 */
        #ProCategoryOfCMPGroup {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Professional Page</h1>
    <form id="professionalForm">
        <div class="form-group">
            <label for="ProCategory">Professional Category</label>
            <select id="ProCategory" name="ProCategory" required>
                <option value="">-- Select a category --</option>
                <option value="Listed or Registered Chinese Medicine Practitioner">Listed or Registered Chinese Medicine Practitioner</option>
                <option value="Dentist">Dentist</option>
                <option value="Doctor">Doctor</option>
                <option value="Occupational Therapist">Occupational Therapist</option>
                <option value="Physiotherapist">Physiotherapist</option>
                <option value="Registered Nurse">Registered Nurse</option>
                <option value="Enroled Nurse">Enroled Nurse</option>
                <option value="Medical Laboratory Technologists">Medical Laboratory Technologists</option>
                <option value="Optometrists">Optometrists</option>
                <option value="Pharmacists">Pharmacists</option>
                <option value="Radiographers">Radiographers</option>
                <option value="Chiropractor">Chiropractor</option>
                <option value="Dental Hygienists">Dental Hygienists</option>
            </select>
        </div>
        
        <!-- 中药医师类型选项组，默认隐藏 -->
        <div class="form-group" id="ProCategoryOfCMPGroup">
            <label for="ProCategoryOfCMP">Type of Chinese Medicine Practitioner</label>
            <select id="ProCategoryOfCMP" name="ProCategoryOfCMP">
                <option value="">-- Select a type --</option>
                <option value="Listed Chinese Medicine Practitioner">Listed Chinese Medicine Practitioner</option>
                <option value="Chinese Medicine Practitioner with Limited Registration">Chinese Medicine Practitioner with Limited Registration</option>
                <option value="Registered Chinese Medicine Practitioner">Registered Chinese Medicine Practitioner</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="RegNo">Professional Registration Number</label>
            <input type="text" id="RegNo" name="RegNo" required>
            <div id="regNoError" class="error"></div>
        </div>
        
        <!-- <button type="submit">Submit</button> -->
    </form>

    <script>
        // 提取正则模式获取逻辑为独立函数
        function getRegexForCategory(category) {
            switch(category) {
                case 'Listed Chinese Medicine Practitioner':
                    return /^L\d{5}$/;
                case 'Chinese Medicine Practitioner with Limited Registration':
                    return /^LR\d{4}$/;
                case 'Registered Chinese Medicine Practitioner':
                    return /^\d{6}$/;
                case 'Dentist':
                    return /^D[LS]?[T]?P?\d{5}$/;
                case 'Doctor':
                    return /^M[LPS]?\d{5}$/;
                case 'Occupational Therapist':
                    return /^(OT[1-2]\d{5}|NA)$/;
                case 'Physiotherapist':
                    return /^(PT[1-2]\d{5}|NA)$/;
                case 'Registered Nurse':
                    return /^RN[GLMPS]?G?\d{6,7}$/;
                case 'Enroled Nurse':
                    return /^EN(LG|P|S|T)?[G|P]?\d{6,7}$/;
                case 'Medical Laboratory Technologists':
                    return /^MT[1-3]\d{5}$/;
                case 'Optometrists':
                    return /^OP1\d{5}$/;
                case 'Pharmacists':
                    return /^P\d{5}$/;
                case 'Radiographers':
                    return /^(RD[1-4]\d{5}|RT[1-2]\d{5}|NA)$/;
                case 'Chiropractor':
                    return /^CC\d{6}$/;
                case 'Dental Hygienists':
                    return /^DH\d{4}$/;
                default:
                    return null;
            }
        }
    
        // 验证函数（供blur和submit共用）
        function validateRegistrationNumber() {
            const mainCategory = document.getElementById('ProCategory').value;
            const regNo = document.getElementById('RegNo').value;
            const errorElement = document.getElementById('regNoError');
            
            // 如果是中药医师类别，则使用子类别的值进行验证
            let actualCategory = mainCategory;
            if (mainCategory === 'Listed or Registered Chinese Medicine Practitioner') {
                actualCategory = document.getElementById('ProCategoryOfCMP').value;
                if (!actualCategory) {
                    errorElement.textContent = 'Please select a type of Chinese Medicine Practitioner';
                    return false;
                }
            }
            
            // 获取正则模式
            const regexPattern = getRegexForCategory(actualCategory);
            
            if (!regexPattern) {
                errorElement.textContent = 'Please select a valid professional category';
                return false;
            }
            
            if (!regexPattern.test(regNo)) {
                errorElement.textContent = 'Invalid registration number format for the selected category';
                return false;
            }
            
            errorElement.textContent = '';
            return true;
        }
    
        // 监听专业类别变化，显示/隐藏中药医师类型选项
        document.getElementById('ProCategory').addEventListener('change', function() {
            const selectedCategory = this.value;
            const cmTypeGroup = document.getElementById('ProCategoryOfCMPGroup');
            
            // 检查是否选择了"Listed or Registered Chinese Medicine Practitioner"
            if (selectedCategory === 'Listed or Registered Chinese Medicine Practitioner') {
                cmTypeGroup.style.display = 'block';
            } else {
                cmTypeGroup.style.display = 'none';
                // 清除可能存在的错误信息
                document.getElementById('regNoError').textContent = '';
            }
        });
    
        // 监听中药医师类型变化，清除错误信息
        document.getElementById('ProCategoryOfCMP').addEventListener('change', function() {
            document.getElementById('regNoError').textContent = '';
        });
    
        // 失焦时验证
        document.getElementById('RegNo').addEventListener('blur', function() {
            validateRegistrationNumber();
        });
    
        // 保留表单提交验证（如需）
        document.getElementById('professionalForm').addEventListener('submit', function(e) {
            e.preventDefault();
            if (validateRegistrationNumber()) {
                alert('Form submitted successfully!');
                // 这里通常是提交表单到服务器的代码
            }
        });
        
        document.getElementById('RegNo').addEventListener('input', function() {
            document.getElementById('regNoError').textContent = '';
        });
    </script>
</body>
</html>